<template>
  
 <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>考试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">  <!-- 遍历数组 渲染数据 -->
            <td>{{index+1}}</td>
            <td>{{item.subject}}</td>
            <td :class="{red:item.score<60? true:false}">{{item.score}}</td>
            <td>{{item.date}}</td>
            <td><a href="#" @click="del(index)">删除</a></td>
          </tr>
       
        </tbody>
        <tbody v-show="!isshow">
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr v-show="isshow">
            <td colspan="5">
              <span>总分：{{total}}</span>
              <span style="margin-left:50px">平均分：{{aver}}</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
</template>

<script>
export default {
     props:{
      list:{
        type:Array
      },
      total:{
        type:Number
      }
     },
      data(){
        return {
          
        }
      },
     methods:{
       del(index){
        this.$emit('del',index)  //子传父  触发自定义事件，传入对应的索引号
       },
      
     },
     computed:{
      aver(){
        return  this.list.length? (this. total /this.list.length).toFixed(2) : 0  //计算平均值
      },  
      isshow(){
         if(this.list.length !==0){    //判断数组长度，给isshow赋值 使 页面对应的html显示隐藏
           return true
         }  
      },
    
     }
    
}
</script>

<style>

</style>